<template>
  <div>
        <el-card >
        <!-- 三级联动自定义事件可以获取子组件传递过来的三级分类 id -->
          <CategoryAttr @getCategoryId='getCategoryId' :show='scene != 0' />
      </el-card>
      <!-- spu基础列表展示 -->
      <el-card style="margin-top:30px" >
            <div v-show='scene==0'>
            <el-button type="primary" icon='el-icon-plus' :disabled='!category3Id'  @click="addSPU">添加Spu</el-button>
            <el-table border :data="spuList" style="width: 100%">
              <el-table-column type="index" label="序号" width="80px" align="center" > </el-table-column>
              <el-table-column prop="spuName" label="Spu名称" width="" align="center" > </el-table-column>
              <el-table-column prop="description" label="Spu描述" width="" align="center" > </el-table-column>
              <el-table-column prop="index" label="操作" width="" align="center" > 
                <template slot-scope="{row,$index}">
                  <el-button type="primary" icon='el-icon-plus' size="mini" title="添加sku" @click="toSkutorm(row)">添加sku</el-button>
                  <el-button type="warning" icon='el-icon-edit' size="mini" title="修改spu" @click="update(row)" >修改spu</el-button>
                  <el-button type="info" icon='el-icon-warning' size="mini" title="查看当前类所有实例" @click="skuinstance(row)">查看sku实例</el-button>
                  <el-button type="danger" icon='el-icon-delete' size="mini" title="删除spu" @click="deletespu(row)" >删除spu</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <!--  @current-change="getSpuList" 自定义事件,当用户点击分页按钮时会触发 -->
            <el-pagination
              style="textAlign:center"
              @size-change="handleSizeChange"
              @current-change="getSpuList"
              :current-page='page'
              :page-sizes="[3, 5, 10]"
              :page-size='limit'
              layout="prev, pager, next, jumper,->,sizes,total"
              :total='total'
              >
            </el-pagination>
        </div>
      <!-- 添加||修改类spufrom -->
      <SpuFrom v-show='scene==1' @changeScence='scene=$event' ref='spu' @save='save' />
      <!-- 添加类的实例skufrom -->
      <SkuFrom v-show='scene==2' @cancel='scene=$event' ref='sku' @save='scene=$event' />
      </el-card>
      <el-dialog :title="spu.spuName" :visible.sync="dialogTableVisible" :before-close="close" >
        <el-table v-loading='loading' border :data="skuList">
            <el-table-column property="skuName" label="名称" width="150"></el-table-column>
            <el-table-column property="price" label="价格" width="200"></el-table-column>
            <el-table-column property="weight" label="重量"></el-table-column>
            <el-table-column  label="默认图片">
              <template slot-scope="{row,$index}">
               <img :src="row.skuDefaultImg" style="width:100px">
              </template>
            </el-table-column>
        </el-table>
      </el-dialog>
  </div>
</template>

<script>
// 引入非路由组件 添加||修改类SpuFrom 添加类的实例SkuFrom
import SpuFrom from './SpuFrom'
import SkuFrom from './SkuFrom'
export default {
  name:'Spu',
  // 注册组件
  components: {
    SpuFrom,
    SkuFrom
  },
  data(){
    return {
      // 接收在组件自定义事件传递过来的id,初始化
      category1Id:'',
      category2Id:'',
      category3Id:'',
      // 初始化分页器数据
      page:1,
      limit:3,
      total:3,//将来接收服务器返回的spu(spu类的总个数)
      // 将来接收服务器返回的spu类
      spuList:[],
      // 定义一个变量
      scene:0 , //0 代表spu基础列表 1 spu列表  2 sku列表


      // 查看sku实例弹出框相关
      dialogTableVisible:false,//控制弹出框的显示与隐藏
      spu:{},//类实例
      skuList:[],//sku类实例
      loading:true//加载中
    }
  },
  methods:{
    // 获取三级分类id
    getCategoryId({categoryId,flag}){
      if(flag ==1){
        this.category1Id = categoryId
          this.category2Id=''
          this.category3Id=''
      }else if(flag ==2){
        this.category2Id = categoryId
         this.category3Id=''
      }else{
        this.category3Id = categoryId
        // 获取spu列表数据
        this.getSpuList()
      }
    },
    // 获取spu列表数据
       async getSpuList(p=1){
         this.page=p
         const {page,limit,category3Id} =this
         let result = await this.$API.spu.getSpuList(page,limit,category3Id)
         console.log(result);
        if(result.code==200){
          this.spuList=result.data.records
          this.total=result.data.total
        }
        },
    // 每页条数改变回调
    handleSizeChange(limit){
      this.limit=limit
       this.getSpuList()
    },
    // 添加Spu类的实例
    addSpu(){
      // 切换场景
      this.scene=1
    },
    // 修改类
    //row:当前某一个类SPU
    update(row){
      // 切换场景
       this.scene=1
      //  通过ref拿到子组件spuFrom的vc
      // 点击修改按钮,调用子组件的方法
      this.$refs.spu.initSpuFormData(row,this.category3Id)
    },
    // 添加spu类
    addSPU(){
      this.scene=1
      this.$refs.spu.initAddFormData(this.category3Id)

    },
    //自定义事件,用于子组件点击保存切换视图
    save({scene,flag}){
      this.scene=scene
      if(flag=='添加'){
        this.getSpuList()
      }else{
        this.getSpuList(this.page)
      }
    },
    //点击删除,删除spu
    async deletespu(row){
      let result = this.$API.spu.reqDeleteSpuById(row.id)
      if(result.code==200){
         this.getSpuList()
      }
    },
    // 点击添加sku
    toSkutorm(row){
      this.scene=2
      this.$refs.sku.initSkuFormData(this.category1Id,this.category2Id,row)
    },
    //--------------------------------------查看sku实例-----------弹出框关闭前回调-------------------------------------------
    // 点击查看sku实例
    async skuinstance(row){
      this.dialogTableVisible=true
      this.spu=row
      let result=await this.$API.spu.reqSkuList(row.id)
      if(result.code==200){
        this.skuList=result.data
        this.loading=false
      }

    },
    //弹出框关闭前操作
    close(){
      this.loading=true
      this.dialogTableVisible=false
      // 清空数据
      this.skuList=[]
    }
  }
}
</script>

<style>

</style>